const path = require('path')
const HtmlWebpackPlugin =require('html-webpack-plugin')

module.exports = {
    mode: "development",
    entry: './src/main.js',//打包入口文件
    output: { //join 合并路径
        path: path.resolve(__dirname, 'dist'),//绝对路径加文件夹
        filename:'bundle.js' //打包后的文件名
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./public/index.html'  //模板在哪里
        })
    ],
    devServer:{
        port: 3000,
        open: true
    },
    module:{
        //rules就是配置loader的地方 loader不用导入
        rules: [{
            //i忽略大小写 反斜杠\表示转义 因为.在正则里面表示任意字符
            test: /\.css$/i,
            use:['style-loader','css-loader']
        }, {
            test: /\.less$/i,
            use:['style-loader','css-loader','less-loader']
        },{
            test: /\.sass$/i,
            use:['style-loader','css-loader','sass-loader']
            }, {
            //webpack5 提供配置处理图片的规则 采用类型为asset类型
            //这种模块类型会在导出一个data URL（base64）和发送一个单独文件直接自动选择
            //什么时候导出data URL  小于8kb（base64）
            //什么时候发送一个单独文件  大于8kb 重命名输出到dist文件夹下    
            test: /\.(png|jpg|jpeg|gif)$/i,
            type:'asset'
            }, {
            //配置处理字体图标文件
                test: /\.(eot|svg|ttf|woff|woff2)$/i,
                type: 'asset/resource',
            generator: {
                    //font 文件名
                    //[name]获取到原文件名
                    //[hash:6]表示自动生成6位数的hash值 就是一个字符串
                    //[ext]:原文件的扩展名
                    filename:'font/[name].[hash:6][ext]'
                }
            }, {
                //配置babel，js语法降级
            test: /\.js$/i,
            exclude: /(node_modules|bower_components)/,  //排除node_modules文件中的js文件
            use: {
                loader: 'babel-loader',
                options: {
                    presets:['@babel/preset-env']
                }
            }
            }]
    }
}